<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<title>Login</title>

<script type="text/javascript" src="js/AjaxRequest.js"></script>
<script type="text/javascript">
//	错误处理的方法
	function onerror(){
		alert("你的操作有误！");
	}

//  实例化ajax对象----生成验证码
function getCheckCode1(showCheckCode,checkCode){
	var loader1=new net.AjaxRequest("js/createCode.jsp?nocache="+new Date().getTime(),deal_getCheckCode,onerror,"GET");
	showCheckCode.style.display='';
	checkCode.focus();
}

//	回调函数
function deal_getCheckCode(){
	document.getElementById("showCheckCode").innerHTML=this.req.responseText;
}
function deal_checkCheckCode(){
	var f = this.req.responseText;
	if(f==1){
		document.getElementById("f_checkCode").src="img/right.gif"
		document.getElementById("f_checkCode").style.display = "";
	}else{
		document.getElementById("f_checkCode").src="img/wrong.gif"
		document.getElementById("f_checkCode").style.display = "";
	}
}

//  生成并显示验证码
	function showCheckCodeFun(showCheckCode,checkCode){
		showCheckCode.style.display='';
//		if(document.getElementById("resultMessage").innerHTML=="温馨提示：单击验证码输入框，获取验证码！验证码区分大小写"){
			getCheckCode1(showCheckCode,checkCode);	//生成验证码
//		}
		checkCode.focus();
	}

//  隐藏验证码显示框
	function hideCheckCode(){
		showCheckCode.style.display='none';
	}

//  验证验证码是否正确
	function checkCheckCode(inCheckCode){
		if(inCheckCode!=""){
			var loader=new net.AjaxRequest("js/checkCode.jsp?inCheckCode="+inCheckCode+"&nocache="+new Date().getTime(),deal_checkCheckCode,onerror,"GET");
		}else{
			document.getElementById("f_checkCode").src="img/wrong.gif"
			document.getElementById("f_checkCode").style.display = "";
		}
	}

	function checkUsername(){
		var username = document.getElementById("username").value;
		if(username == "" || username == null){
			document.getElementById("f_username").src="img/wrong.gif"
			document.getElementById("f_username").style.display = "";
		}else{
			document.getElementById("f_username").src="img/right.gif"
			document.getElementById("f_username").style.display = "";
		}
	}
	
	function checkEmail(){
		var email = document.getElementById("email").value;
		if(email == "" || email == null){
			document.getElementById("f_email").src="img/wrong.gif"
			document.getElementById("f_email").style.display = "";
		}else{
			document.getElementById("f_email").src="img/right.gif"
			document.getElementById("f_email").style.display = "";
		}
	}
	
	function checkAddress(){
		var address = document.getElementById("address").value;
		if(address == "" || address == null){
			document.getElementById("f_address").src="img/wrong.gif"
			document.getElementById("f_address").style.display = "";
		}else{
			document.getElementById("f_address").src="img/right.gif"
			document.getElementById("f_address").style.display = "";
		}
	}
</script>
<style type="text/css">
<!--
#showCheckCode {
	position:absolute;
	left:262px;
	top:100px;
	width:100px;
	height:33px;
	z-index:1;
}

-->
</style>
</head>
<body onBlur="hideCheckCode()">
<form name="dForm" action="" method="post">
  <table width="350" height="150" border="1" cellspacing="0" bordercolor="#0000FF" >
    <tr>
      <td width="25%">username:</td>
      <td style="color:#FF0000"><input type="text" id="username" onClick="hideCheckCode()" onBlur="checkUsername()">*</td>
      <td width="15%"><img id="f_username" style="display:none" height="22"/></td>
    </tr>
    <tr>
      <td>email:</td>
      <td style="color:#FF0000"><input type="text" id="email" onClick="hideCheckCode()" onBlur="checkEmail()">*</td>
      <td width="15%"><img id="f_email" style="display:none" height="22"/></td>
    </tr>
    <tr>
      <td>address:</td>
      <td style="color:#FF0000"><input type="text" id="address" onClick="hideCheckCode()" onBlur="checkAddress()">*</td>
      <td width="15%"><img id="f_address" style="display:none" height="22"/></td>
    </tr>
    <tr>
      <td>checkCode:</td>
      <td style="color:#FF0000">
      	<div id="showCheckCode" style="display:none;padding:3px" align="center"> 
      		<a href="#" onClick="getCheckCode1(showCheckCode,checkCode)">
      			<img src="img/checkCodePicture.jpg" id="createCheckCode" width="100" height="31">
            </a> 
        </div>
        <input type="text" id="checkCode" onBlur="checkCheckCode(this.value)" onClick="showCheckCodeFun(showCheckCode,checkCode)" title="单击输入验证码" >*
       </td>
      <td width="15%"><img id="f_checkCode" style="display:none" height="22"/></td>
    </tr>
    <tr>
      <td onClick="hideCheckCode()"><input type="submit" name="submit" value="submit"></td>
      <td colspan="2" onClick="hideCheckCode()"><input name="reset" type="reset" value="reset"></td>
    </tr>
  </table>
</form>
</body>
</html>